<template>
	<el-dialog :before-close="handleClose" title="补录患者查询" v-model="visible" :close-on-click-modal="false">
		<el-form :model="searchForm" label-position="left" ref="formRef">
			<el-row :gutter="20">
				<el-col :span="8">
					<el-form-item label="姓名：" prop="name">
						<el-input v-model="searchForm.name" autocomplete="off" placeholder="请输入姓名"> </el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item label="医保卡号：" prop="medicalCard">
						<el-input v-model="searchForm.medicalCard" autocomplete="off" placeholder="请输入医保卡号"> </el-input>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-button icon="search" type="primary" @click="searchPatient">查询</el-button>
					<el-button icon="refresh" @click="handleReset">重置</el-button>
				</el-col>
			</el-row>
		</el-form>
		<el-table :data="patientList" height="300" style="margin-top: 20px">
			<el-table-column width="120" property="name" label="姓名" show-overflow-tooltip />
			<el-table-column width="120" property="age" label="年龄" show-overflow-tooltip />
			<el-table-column width="120" property="sex" label="性别" show-overflow-tooltip>
				<template #default="scope">
					<el-tag size="small" v-if="scope.row.sex === '1'">男</el-tag>
					<el-tag size="small" v-if="scope.row.sex === '2'">女</el-tag>
				</template>
			</el-table-column>
			<el-table-column width="240" property="icCard" label="身份证号" show-overflow-tooltip />
			<!-- 操作 -->
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="primary" link size="small" @click="handleAddBlood(scope.row)">补录</el-button>
				</template>
			</el-table-column>
		</el-table>
		<AdditionalRecord ref="additionalRecordRef" @after-close="handleAfterDialogClose" />
	</el-dialog>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import AdditionalRecord from './additional_record.vue';
import { getCustomerByNameAndMedicalCard } from '/@/api/blood/bloodxCustomerBlood';
import { useMessage } from '/@/hooks/message';
const emits = defineEmits(['add-success']);
const message = useMessage();

// 查询dialog是否显示
const visible = ref(false);

// 打开查询dialog
function openDialog() {
	visible.value = true;
}
const formRef = ref();

// 查询表单
const searchForm = ref({
	name: '',
	medicalCard: '',
});

// 查询患者
const patientList = ref([]);

function checkSearchForm() {
	return new Promise((resolve, reject) => {
		if (searchForm.value.name || searchForm.value.medicalCard) {
			resolve(true);
		} else {
			reject(new Error('请输入姓名或身份证号'));
		}
	});
}

// 查询患者
function searchPatient() {
	checkSearchForm()
		.then(() => {
			getCustomerByNameAndMedicalCard(searchForm.value).then((res) => {
				patientList.value = [res.data];
			});
		})
		.catch((err) => {
			message.error(err.message);
		});
}

// 重置
function handleReset() {
	patientList.value = [];
	formRef.value?.resetFields();
}

// 补录成功后触发查询dialog关闭
function handleAfterDialogClose() {
	visible.value = false;
	patientList.value = [];
	formRef.value?.resetFields();
	emits('add-success');
}

// 关闭dialog
function handleClose(done: () => void) {
	patientList.value = [];
	formRef.value?.resetFields();
	done();
}

// 补录dialog
const additionalRecordRef = ref();

// 打开补录dialog
function handleAddBlood(row: any) {
	additionalRecordRef.value.openDialog(row);
}

defineExpose({
	openDialog,
});
</script>

<style scoped lang="scss"></style>
